<template>
    <div style="background-color: #f5f5f5">
        <scroll-view style="background-color: #f5f5f5">
            <div class="card">
                <div style="display: flex; flex-direction: row">
                    <img
                        src="https://img.zcool.cn/community/012db65543065f0000019ae9c9b0b2.jpg@1280w_1l_2o_100sh.jpg"
                        style="width: 124px; height: 104px; object-fit: contain; border-radius: 5px"
                    />
                    <div
                        style="
                            flex-grow: 1;
                            display: flex;
                            flex-direction: column;
                            align-items: start;
                            padding-left: 10px;
                        "
                    >
                        <div>
                            <text class="titleText">{{ '暗杀计划的看哈空间数据库的黑科技' }}</text>
                        </div>
                        <div style="height: 10px"></div>
                        <div>
                            <div>
                                <text class="subText"
                                    >活动时间：{{ '暗杀计划的看哈空间数据库的黑科技' }}</text
                                >
                            </div>
                            <div>
                                <text class="subText"
                                    >活动地点：{{ '暗杀计划的看哈空间数据库的黑科技' }}</text
                                >
                            </div>
                        </div>
                        <div style="flex-grow: 1"></div>
                        <div style="display: flex; flex-direction: row; width: 100%">
                            <!-- <div class="row" style="align-items: center">
                                <div v-if="coins > 0" class="row">
                                    <img
                                        src="@/activityPages/assets/ze-points.png"
                                        style="width: 16px; height: 16px"
                                    /><text class="moneyText" style="font-size: 16px"
                                        >{{ coins
                                        }}<text class="moneyText" style="font-size: 10px"
                                            >积分</text
                                        >
                                    </text>
                                </div>
                                <img
                                    v-if="coins > 0 && price > 0"
                                    src="@/activityPages/assets/add5464.png"
                                    style="width: 12px; height: 12px"
                                />
                                <text
                                    v-if="price > 0"
                                    class="moneyText"
                                    style="font-size: 18px; font-weight: bold"
                                    >{{ price }}￥</text
                                >

                                <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
                                    >免费</text
                                >
                            </div> -->
                            <MoneyCard :coins="coins" :price="price"></MoneyCard>
                            <div style="flex-grow: 1"></div>
                            <CountButtons
                                :on-count-change="onCountChange"
                                width="25px"
                            ></CountButtons>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 15px"></div>
            <div class="card">
                <div class="row" style="width: 100%">
                    <text>商品总金额</text>
                    <div style="flex-grow: 1"></div>
                    <!-- <div class="row" style="align-items: center">
                        <div v-if="coins > 0" class="row">
                            <img
                                src="@/activityPages/assets/ze-points.png"
                                style="width: 16px; height: 16px"
                            /><text class="moneyText" style="font-size: 16px"
                                >{{ coinsTotal()
                                }}<text class="moneyText" style="font-size: 10px">积分</text>
                            </text>
                        </div>
                        <img
                            v-if="coins > 0 && price > 0"
                            src="@/activityPages/assets/add5464.png"
                            style="width: 12px; height: 12px"
                        />
                        <text
                            v-if="price > 0"
                            class="moneyText"
                            style="font-size: 18px; font-weight: bold"
                            >{{ amount() }}￥</text
                        >

                        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree">免费</text>
                    </div> -->
                    <MoneyCard :price="amount()" :coins="coinsTotal()"></MoneyCard>
                    <div></div>
                </div>
            </div>
            <div style="height: 15px"></div>
            <div class="card">
                <div class="row" style="align-items: center">
                    <text class="inputTitle">姓名：</text>
                    <uni-easyinput
                        v-model="value"
                        placeholder="请输入姓名"
                        class="input"
                        :input-border="false"
                    ></uni-easyinput>
                </div>
                <div class="divider"></div>
                <div class="row" style="align-items: center">
                    <text class="inputTitle">联系方式：</text>
                    <uni-easyinput
                        v-model="value"
                        placeholder="请联系方式"
                        class="input"
                        :input-border="false"
                    ></uni-easyinput>
                </div>
            </div>
        </scroll-view>
        <div class="bottom">
            <div class="card">
                <div class="row" style="align-items: center; justify-content: end; width: 100%">
                    <div style="flex-grow: 1"></div>
                    <text>合计：</text>
                    <div class="row" style="align-items: center">
                        <div v-if="coins > 0" class="row">
                            <text class="moneyText" style="font-weight: bold"
                                >{{ coinsTotal()
                                }}<text class="moneyText" style="font-size: 10px">积分</text>
                            </text>
                        </div>
                        <img
                            v-if="coins > 0 && price > 0"
                            src="@/activityPages/assets/add5464.png"
                            style="width: 12px; height: 12px"
                        />
                        <text v-if="price > 0" class="moneyText" style="font-weight: bold"
                            >{{ amount() }}￥</text
                        >

                        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree">免费</text>
                    </div>
                    <div style="width: 20px"></div>
                    <div class="button" @click="onConfirm">立即预约</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import request from '@/utils/request'
import { defineComponent, reactive, ref, defineProps, getCurrentInstance } from 'vue'
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'

import { useStore } from 'vuex'
import CountButtons from '@/components/activity/count-buttons.vue'
import MoneyCard from '@/activityPages/components/money-card.vue'
const buyCount = ref(0)
const price = ref(10)
const coins = ref(10)
function coinsTotal() {
    return coins.value * buyCount.value
}
// const amount = ref(100)
function amount() {
    return buyCount.value * price.value
}
let params = {}
onLoad((e) => {
    console.log('fill order params=', e)
    params = e
    buyCount.value = Number.parseInt(params.count, 10)
})
function onCountChange(i) {
    buyCount.value = i
    // console.log('buyCount=', buyCount.value)
}
function onConfirm() {
    uni.navigateTo({
        url: '/activityPages/order/order-success'
    })
}
</script>

<style lang="scss" scoped>
.input {
    border: none;
}
.button {
    width: 116px;
    height: 35px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(236, 106, 45, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inputTitle {
    width: 70px;
    text-align: end;
}
.card {
    line-height: 20px;
    border-radius: 10px;
    background-color: white;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    padding: 10px;
    align-items: flex-start;

    display: flex;
    flex-direction: column;
}
.titleText {
    line-height: 17px;
    color: rgba(16, 16, 16, 1);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    font-weight: bold;
}
.subText {
    color: rgba(153, 153, 153, 1);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
}
.row {
    display: flex;
    flex-direction: row;
}
.moneyText {
    color: #e8592f;
    font-size: 20px;
    text-align: left;
    font-family: PingFangSC-regular;
}
.moneyTextFree {
    color: #328c00;
    font-size: 20px;
    text-align: left;
    font-family: PingFangSC-regular;
}
.divider {
    width: 999px;
    height: 2px;
    background-color: #f5f5f5;
    // border: 1px solid rgba(245, 245, 245, 1);
}
.bottom {
    position: fixed;
    bottom: calc(var(--window-bottom));
    z-index: 1030;
    margin-bottom: 0px;
    width: 100%;
}
</style>
